import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Spin } from 'antd';
import { WeaSwitch } from 'comsMobx';
import { WeaRightMenu, WeaTop, WeaAlertPage, WeaTools, WeaFormItem, WeaSearchGroup } from 'ecCom';

import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('crmPasswordStore')
@observer
export default class ChangePassword extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const store = this.props.crmPasswordStore;
    const { initResponsed, initSuccessed, initFailedMsg } = store;
    if (initResponsed) {
      if (initSuccessed) {
        const { loading } = store;
        return (
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@r6xrao`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)} >
            <WeaTop
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@kbq07x`}
              title={getLabel(17993, '修改密码')}
              loading={loading}
              icon={<i className="icon-coms-crm" />}
              iconBgcolor="#96358a"
              buttons={this.getButtons(this.props.ecId || '')}
              buttonSpace={10}
              showDropIcon
              dropMenuDatas={this.getRightMenu()}
              onDropMenuClick={this.onRightMenuClick}
            >
              {this.getFormParams()}
              <div style={{ paddingLeft: '30px', marginTop: '5px' }}><span style={{ color: '#f50', marginRight: '2px' }}>*</span>{getLabel(15736, '注意事项')}：</div>
              <div style={{ paddingLeft: '65px', paddingTop: '5px' }}>1、{getLabel(31864, '密码只能输入数字或字母，不能输入其它符号或文字')};</div>
              <div style={{ paddingLeft: '65px', paddingTop: '5px' }}>2、{getLabel(31862, '密码最少输入6位，最多20位')}</div>
            </WeaTop>
          </WeaRightMenu>
        );
      }
      return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@x0gg6e`}><div style={{ color: '#000' }}>{initFailedMsg}</div></WeaAlertPage>;
    }
    return <div style={{ position: 'absolute', width: '100%', top: '48%', textAlign: 'center' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@9kvwq2`} spinning /></div>;
  }

  componentDidMount() {
    const { crmPasswordStore } = this.props;
    crmPasswordStore.doInit();
  }

  componentWillUnmount() {
    const { crmPasswordStore } = this.props;
    crmPasswordStore.doClear();
  }

  getButtons(ecId) {
    const { crmPasswordStore } = this.props;
    const btns = [];
    btns.push(<Button ecId={`${ecId}_Button@1bihz1@save`} type="primary" onClick={() => { crmPasswordStore.savePassword(); }}>{getLabel(86, '保存')}</Button>);
    return btns;
  }

  getRightMenu() {
    const btns = [];
    btns.push({
      icon: <i className="icon-coms-Preservation " />,
      content: getLabel(86, '保存'),
      key: 1,
    });
    return btns;
  }

  onRightMenuClick(key) {
    const { crmPasswordStore } = this.props;
    if (key == '1') {
      crmPasswordStore.savePassword();
    }
  }

    getFormParams=() => {
      const { crmPasswordStore } = this.props;
      const { passwordForm, passwordCondition } = crmPasswordStore;
      const { isFormInit } = passwordForm;
      const group = [];
      isFormInit && toJS(passwordCondition).map((c,indexGroup) => {
        const items = [];
        c.items.map((fields, index) => {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wts8ik@${index}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={passwordForm.getError(fields)}
              tipPosition="bottom"
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@q1ru8n@${index}`} fieldConfig={fields} form={passwordForm} />
            </WeaFormItem>),
            colSpan: 1,
          });
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gx3jah@${indexGroup}`} needTigger col={1} title={c.title} showGroup={c.defaultshow} items={items} />);
      });
      return group;
    }
}
